<!-- 商品列表 -->
<template>
	<view class="list-box">
		<view class="head-box">
			<!-- 标题栏 -->
			<shopro-navbar>
				<view class="u-flex-1 u-flex u-col-center u-m-x-20" slot="content">
					<u-search shape="square" action-text="" :action-style="{'display':'none'}" placeholder="输入店铺名称" @change="onSearch" @search="onSearch" @clear="clearSearch" v-model="searchVal" :showAction="false" height="60"></u-search>
				</view>
			</shopro-navbar>
      <!-- 	<筛选栏> -->
      <view class="filter" :style="[{top: navigationBar + 'px' }]" offset-top="200" custom-nav-height="220">
        <view :class="active=='-1'?'active':''" @click="checkFilter('-1')"  >
          <span class="title">全部</span>
          <u-icon :name="active=='-1'?'https://d-duomi.bigchun.com/images/shangbang/arrow2.png':'https://d-duomi.bigchun.com/images/shangbang/arrow.png'" size="30"></u-icon>
        </view>
        <view :class="active=='5'?'active':''" @click="checkFilter('5')">附近<u-icon :name="active=='5'?'https://d-duomi.bigchun.com/images/shangbang/arrow2.png':'https://d-duomi.bigchun.com/images/shangbang/arrow.png'"
                                                                                   size="30"></u-icon>
        </view>
        <view :class="active=='0'?'active':''" @click="checkFilter('0')">{{sortList[sortType].name}}
          <u-icon :name="active=='0'?'https://d-duomi.bigchun.com/images/shangbang/arrow2.png':'https://d-duomi.bigchun.com/images/shangbang/arrow.png'" size="30"></u-icon>
        </view>
      </view>
		</view>

		<view class="u-waterfall u-p-16" v-if="!isEmpty">
      <view class="big-card-wrap u-p-10">
        <block v-for="item in shopList" :key="item.id">
          <search-result
              :detail="item"
              @click="$Router.push({ path: '/pages/index/GoodsDetails', query: { id: item.id } })"
          ></search-result>
        </block>
      </view>
		</view>
    <u-popup v-model="showpopup" :round="20" mode="top" @close="close" @open="open">
      <view class="popup-box" :style="[{paddingTop:systemBar + 'px' }]">
        <view style="display: flex;justify-content: center;align-items: center;" :style="[{height: navigationBar + 'px' }]">
          <view style="position: fixed;left: 10px;"  @click="close" >
            <u-icon name="arrow-left"></u-icon>
          </view>
          <view>智能排序</view>
        </view>
        <view>
          <view v-for="(item,index) in sortList" :key="index" class="check-right" :class="index==sortType?'active':''"
                :data-index="index" @click="checkSortType">

            <view style="flex: 1;"> {{item.name}}</view>
            <view>
              <u-icon name="checkbox-mark" v-if="index==sortType" color="#FC5351"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
		<!-- 缺省页 -->
		<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无该商家，还有更多商家等着你噢~"></shopro-empty>
		<!-- 加载更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#d4d4d4" />
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
let systemInfo = uni.getSystemInfoSync();
let historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
import shGoodsCard from '../index/components/sh-goods-card.vue';
import SearchResult from "../../components/search-result/search-result";
export default {
	components: {
    SearchResult,
    shGoodsCard
	},
	data() {
		return {
			isEmpty: true,
			goodsList: [],
			searchVal: '',
			listParams: {
        cate_id: '',
				keywords: '',
        shop_type:'',
				page: 1
			},
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			lastPage: 1,
			// 瀑布流 350-330
			addTime: 100, //排序间隙时间
			leftHeight: 0,
			rightHeight: 0,
      menu: "",
      systemBar: "",
      navigationBar: "",
      sortList: [{
        name: "智能排序",
        id: "1"
      },
        {
          name: "折扣高低",
          id: "2"
        },
        {
          name: "人均消费高低",
          id: "3"
        },
        {
          name: "好评优先",
          id: "4"
        },
        {
          name: "销量优先",
          id: "5"
        },
        {
          name: "距离优先",
          id: "6"
        },
      ],
      list: [],
      page: 1,
      limit: 10,
      shop_sort: 0,
      shopList: [],
      current_page: 0,
      last_page: 1,
      sortType: 0,
      statusBarHeight: systemInfo.statusBarHeight,
      showpopup: false,
      active: "-1",
      themeColor: "#FC5351",
		};
	},
	// 触底加载更多
	onReachBottom() {
		if (this.listParams.page < this.lastPage) {
			this.listParams.page += 1;
			this.getGoodsList();
		}
	},
	onLoad() {
		if (this.$Route.query.id) {
			this.listParams.cate_id = this.$Route.query.id;
			this.getGoodsList();
		} else if (this.$Route.query.hasOwnProperty('keywords')) {
			this.listParams.keywords = this.$Route.query.keywords;
			this.searchVal = this.$Route.query.keywords;
			!this.$Route.query.keywords && this.getGoodsList();
		} else if(this.$Route.query.shop_type){
      this.listParams.shop_type = this.$Route.query.shop_type;
      this.getGoodsList();
    }else {
			this.getGoodsList();
		}
    wx.getSystemInfo({
      success: res => {
        this.system = res
      }
    })
    //获取胶囊信息
    this.menu = wx.getMenuButtonBoundingClientRect()
    this.systemBar = this.system.statusBarHeight//状态栏高度
    this.navigationBar = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height //胶囊高度
	},
	methods: {
    checkFilter(active) {
      if (active == '0') {
        this.showpopup = true
        this.active = active;
      } else {
        this.active = active;
        this.shopList = []
        this.getGoodsList()
      }

    },
    checkSortType(e) {
      var index = e.currentTarget.dataset.index;
      this.sortType = index;
      this.showpopup = false
      this.shopList = []
      this.getGoodsList()
      console.log(e);
    },
    open() {
      // console.log('open');
    },
    close() {
      this.showpopup = false
      // console.log('close');
    },
		clear() {
			this.shopList = [];
		},
		// 键盘搜索,输入搜索
		onSearch() {
			this.goodsList = [];
			this.listParams.page = 1;
			this.lastPage = 1;
			this.listParams.keywords = this.searchVal;
			this.clear();
		  this.getGoodsList();
		},

		// 队列
		getArr(list, item) {
			let arr = list;
			let length = 10; //队列长度
			arr.length < length ? arr.unshift(item) : arr.pop();
			return arr;
		},

		// 清除搜索框
		clearSearch() {
			this.searchVal = '';
			this.clear();
		},
    // 商品列表
    async getGoodsList() {
      var that = this;
      //that.isRefresh = false;
      that.$https('category.shopLists', {
        page: that.listParams.page,
        limit: that.limit,
        shop_sort: that.sortType,
        cate_id:that.listParams.cate_id,
        shop_type:this.listParams.shop_type,
        keyword: that.listParams.keywords,
        latitude: uni.getStorageSync("latitude"),
        longitude: uni.getStorageSync("longitude")
      })
          .then(res => {
            if (res.code === 1) {
              if (res.data.current_page != 1) {
                that.shopList = that.shopList.concat(res.data.data);
                that.listParams.page = res.data.current_page;
                that.lastPage = res.data.last_page;
              } else {
                that.shopList = res.data.data;
                that.listParams.page  = res.data.current_page;
                that.lastPage = res.data.last_page;
              }
              that.loadStatus = that.listParams.page < res.data.last_page ? 'loadmore' : 'nomore';
              that.isEmpty = !that.shopList.length;
            }
          });

    },
	}
};
</script>

<style lang="scss">
.list-box{
  background: #ffffff;
  height: 100%;
}
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.u-waterfall {
	@include vue-flex;
	flex-direction: row;
	align-items: flex-start;
}

.u-column {
	@include vue-flex;
	flex: 1;
	flex-direction: column;
	height: auto;
}
.head-box {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 998;
	background: #fff;
}
.filter {
  display: flex;
  align-items: center;
  flex-direction: row;
  position: sticky;
  // top: 10vh;
  background-color: white;
  z-index: 1000;

  // border-radius: 8px 8px 0px 0px;
  // margin: 0 20rpx;
  view {
    flex: 1;
    text-align: center;
    line-height: 70rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #777777;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  u-icon {
    margin-left: 8rpx;
  }

  .active {
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FC5351;
  }
}
.check-right {
  height: 72rpx;
  font-size: 28rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 19px;
  align-items: center;
  display: flex;
  padding: 28rpx;
  &:last-child{
    margin-bottom: 20rpx;
  }
  .active {
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FC5351;
  }
}

.active {
  font-size: 28rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #FC5351;
}

.content {
  margin: 20rpx;
  border-radius: 8px 8px 8px 8px;
  background-color: white;
  height: 100vh;
  overflow: scroll;
}
.lable {
  border-left: transparent !important;
  border-radius: 0rpx 5rpx 5rpx 0rpx;
  left: -3rpx;
  padding: 1px 5px 0;
  font-size: 10px;
  font-weight: 500;
  color: #FC5351;
  height: 32rpx;
  border: 1px solid #FC5351;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: relative;

}
</style>
